import AvatarTitle from "@/components/AvatarTitle";
import { GetLatestCommentAPI } from "@/type/wwwAPI";
import { Col, ListGroupItem, Row } from "reactstrap";
import { getDatetime } from "taehui-ts/date";
import { useTo } from "taehui-ts/fe-utilities";

const CommentTitleView = ({
  forumID,
  essayID,
  comment: { avatarID, avatarName, date, text },
}: {
  forumID: string;
  essayID: number;
  comment: GetLatestCommentAPI[number];
}) => {
  const to = useTo();

  return (
    <ListGroupItem
      key={essayID}
      className="route"
      onClick={() => {
        to(`/forum/${forumID}/${essayID}`);
      }}
    >
      <Row className="g-0">
        <AvatarTitle avatarID={avatarID} avatarName={avatarName}>
          <span className="title">{text}</span>
        </AvatarTitle>
        <Col className="m-1" xs="auto">
          <span>{getDatetime(date)}</span>
        </Col>
      </Row>
    </ListGroupItem>
  );
};

export default CommentTitleView;